<template>
  <div>
    <!-- 描述组件，带背景图片 -->
    <el-descriptions
      :title="item.modifierDate"
      :column="1"
      border
      v-for="(item, index) in accidentDetailsList"
      :key="index"
      class="descriptions-content"
    >
      <el-descriptions-item
        label="事故编号"
        label-align="left"
        align="left"
        width="150px"
      >
        {{ item.accidentNumber }}
      </el-descriptions-item>
      <el-descriptions-item label="联系方式" label-align="left" align="left">
        {{ item.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="事故地址" label-align="left" align="left">
        {{ item.address }}
      </el-descriptions-item>
      <el-descriptions-item label="责任人" label-align="left" align="left">
        {{ item.responsiblePerson }}
      </el-descriptions-item>
      <el-descriptions-item label="事故详情" label-align="left" align="left">
        {{ item.accidentDetails }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getSafetys } from '../../api/work.js';

export default {
  data() {
    return {
      accidentDetailsList: [] // 存储多条事故详情的数据
    };
  },
  mounted() {
    this.fetchAccidentDetailsList(); // 组件挂载时调用函数获取数据
  },
  methods: {
    async fetchAccidentDetailsList() {
      try {
        // 将从后端获取的数据赋值到本地的 accidentDetailsList 中
        const result = await getSafetys();
        if (result.data.code === 200) {
          this.accidentDetailsList = result.data.data;
        }
      } catch (error) {
        console.error('获取事故详情列表失败:', error);
      }
    }
  }
};
</script>

<style scoped>
/* 设置背景图片 */
.descriptions-content {
  background-color: rgb(236, 233, 228);
}

/* 去除 label 和 content 的白色背景 */
:deep(.el-descriptions-item__label) {
  background-color: transparent !important; /* 无背景色 */
}

:deep(.el-descriptions-item__content) {
  background-color: transparent !important; /* 无背景色 */
}
</style>
